<template>
  <div id="home">
    <!-- 顶部banner -->
    <div class="homeSwiper">
      <swiper ref="mySwiper" :options="swiperOptionsBanner">
        <swiper-slide v-for="(item, index) in homeBannerData" :key="index">
          <img :src="$globalImageUrl + item.imgUrl" alt="" @click="onOpenExternalLink(item.pathUrl)">
        </swiper-slide>
      </swiper>
    </div>
    <div class="homeContent">
      <!-- 图片引导 -->
      <div class="homeContentTitleImg">
        <p>
          <img :src="$globalImageUrl + staticImage.pictureUrl1" alt="" style="width: 67%;" @click="onOpenExternalLink(staticImage.url1)">
          <span class="homeContentTitleImgText1 allText">{{staticImage.text1}}</span>
          <img :src="$globalImageUrl + staticImage.pictureUrl2" alt="" style="width: 30%; float: right;" @click="onOpenExternalLink(staticImage.url2)">
          <span class="homeContentTitleImgText2 allText">{{staticImage.text2}}</span>
        </p>
        <p><img :src="$globalImageUrl + staticImage.pictureUrl3" alt="" @click="onOpenExternalLink(staticImage.url3)">
          <span class="homeContentTitleImgText3 allText">{{staticImage.text3}}</span>
        </p>
      </div>
      <!-- 合作高校 -->
      <div class="homeContentFlex" v-show="collegesFlag">
        <div class="homeContentFlexLeft">
          <h2 class="homeContentFlexTitle">合作高校</h2>
          <div class="homeContentFlexLeftBox">
            <swiper ref="mySwiper" :options="swiperOptionsSchool">
              <swiper-slide v-for="(item, index) in joinCollegesData" :key="index">
                <div class="homeContentFlexSwiper">
                  <img :src="$globalImageUrl + item.image3" alt="" style="height: 4rem;" @click="onOpenExternalLink('http://' + item.domainUrl + '/#/home')">
                </div>
              </swiper-slide>
            </swiper>
          </div>
        </div>
        <div class="homeContentFlexRight">
          <h2 class="homeContentFlexTitle">新闻公告 <span @click="jumpTo('/newsList?sceneType=home')">更多</span></h2>
          <div class="homeContentFlexRightBox">
            <div class="homeContentFlexRightBoxList">
              <ul>
                <li v-for="(item, index) in journalismData" :key="index" @click="jumpTo('/newsDetail?megagameNewsId=' + item.newsId)">
                  <span :class="{gray: index > 2}">{{++index}}</span>
                  <p class="ellipse">{{item.newsTitle}}</p>
                  <i>{{item.createTime.slice(0, 10)}}</i>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </div>
      <!-- 实战案例 -->
      <div class="homeContentFlex">
        <div class="homeContentFlexLeft" style="width: 100%;">
          <!-- <h2 class="homeContentFlexTitle">{{collegesFlag ? '实战案例' : '优秀作品'}} <span @click="jumpTo('/skillLift')">更多</span></h2> -->
          <h2 class="homeContentFlexTitle">{{collegesFlag ? '实战案例' : '优秀作品'}} <span @click="jumpTo('/excellentWorks')">更多</span></h2>
          <div class="homeContentFlexLeftBox">
            <div class="homeContentFlexLeftBoxWorks">
              <ul>
                <li v-for="(item, index) in practicalCases" :key="index" @click="jumpTo('/worksDetail?worksId=' + item.id)">
                  <img :src="$globalImageUrl + item.literatureImg" alt="">
                  <!-- <video :src="$globalImageUrl + item.literatureImg" controls></video> -->
                  <h4 class="ellipse">{{item.literatureName}}</h4>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </div>
      <!-- 推荐设计师 -->
      <div class="homeContentFlex">
        <div class="homeContentFlexLeft" style="width: 100%;">
          <h2 class="homeContentFlexTitle">推荐设计师 <span @click="jumpTo('/teacherRecommend')">更多</span></h2>
          <div class="homeContentFlexLeftBox">
            <div class="homeContentFlexLeftBoxChief">
              <div class="chiefUserImg" @click="jumpTo('/stylistInfo?stylistUserId=' + firstRecommendDesigners.userId)">
                <img :src="$globalImageUrl + firstRecommendDesigners.avatar" alt="">
                <h4 class="ellipse">{{firstRecommendDesigners.userName}}</h4>
              </div>
              <div class="chiefUserImgList">
                <ul>
                  <li v-for="(item, index) in recommendDesigners" :key="index" @click="jumpTo('/stylistInfo?stylistUserId=' + item.userId)">
                    <img :src="$globalImageUrl + item.avatar" alt="">
                    <h4 class="ellipse">{{item.userName}}</h4>
                  </li>
                </ul>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- 创意集市 -->
      <div class="homeContentFlex">
        <div class="homeContentFlexLeft">
          <h2 class="homeContentFlexTitle">创意集市 <span @click="jumpTo('/ideaMarket')">更多</span></h2>
          <div class="homeContentFlexLeftBox">
            <div class="homeContentFlexLeftBoxBazaar">
              <ul>
                <li v-for="(item, index) in creativeMarket" :key="index" @click="jumpTo('/worksDetail?sceneType=sell&worksId=' + item.id)">
                  <img :src="$globalImageUrl + item.productImg" alt="">
                  <div class="bazaarTitle ellipse">
                    <p style="display: inline-block;">{{item.productName}}</p>
                    <p class="fr"><span style="padding: 0;">{{item.price}}</span>元/张</p>
                  </div>
                  <span>发布于{{item.createTime}}</span>
                  <span class="fr">销量：{{item.buyNum}}</span>
                </li>
              </ul>
            </div>
          </div>
        </div>
        <div class="homeContentFlexRight">
          <h2 class="homeContentFlexTitle">设计|制作任务 <span @click="jumpTo('/designTask')">更多</span></h2>
          <div class="homeContentFlexRightBox">
            <div class="homeContentFlexRightBoxList">
              <ul>
                <li v-for="(item, index) in productionTasks" :key="index" @click="jumpTo('/designTaskDetail?taskId=' + item.id)">
                  <span :class="{gray: index > 2}">{{++index}}</span>
                  <p class="ellipse">{{item.title}}</p>
                  <i>{{item.createTime.slice(0, 10)}}</i>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </div>
      <!-- 师徒值工作室 -->
      <div class="homeContentFlex">
        <div class="homeContentFlexLeft">
          <h2 class="homeContentFlexTitle">师徒制工作室 <span @click="jumpTo('/stylistInfoList?sceneType=teacherList')">更多</span></h2>
          <div class="homeContentFlexLeftBox">
            <div class="homeContentFlexLeftBoxWorkroom">
              <ul>
                <li v-for="(item, index) in mentoringData" :key="index" @click="jumpTo('/stylistInfo?sceneType=teacher&studioId=' + item.id)">
                  <img :src="$globalImageUrl + item.studioLogo" alt="">
                  <div class="workroomInfo">
                    <p class="workroomTitle ellipse">{{item.studioName}}</p>
                    <span class="ellipse-two">{{item.introduce}}</span>
                    <p></p>
                    <span>{{item.createTime}}</span>
                  </div>
                </li>
              </ul>
            </div>
          </div>
        </div>
        <div class="homeContentFlexRight">
          <h2 class="homeContentFlexTitle">政策解读 <span @click="jumpTo('/newsList?sceneType=policy')">更多</span></h2>
          <div class="homeContentFlexRightBox">
            <div class="homeContentFlexRightBoxPolicy">
              <ul>
                <li v-for="(item, index) in policyElucidation" :key="index" @click="jumpTo('/newsDetail?megagameNewsId=' + item.newsId)">
                  <!-- <img :src="$globalImageUrl + item.newsImg" alt=""> -->
                  <div class="workroomInfo">
                    <p class="workroomTitle ellipse">{{item.newsTitle}}</p>
                    <span class="ellipse">{{item.createTime}}</span>
                    <p></p>
                    <!-- <span><img src="../../assets/img/home/visitor_num.png" alt=""><i>54</i></span> -->
                  </div>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </div>
      <!-- 合作企业 -->
      <div class="homeContentFlex">
        <div class="homeContentFlexLeft">
          <h2 class="homeContentFlexTitle">合作企业 <span @click="jumpTo('/stylistInfoList?sceneType=enterpriseList&type=jiuye')">更多</span></h2>
          <div class="homeContentFlexLeftBox">
            <div class="homeContentFlexLeftBoxWorkroom">
              <ul> 
                <li v-for="(item, index) in joinEterprise" :key="index" @click="jumpTo('/stylistInfo?sceneType=enterprise&companyId=' + item.id + '&uId=' + item.userId) ">
                  <img :src="$globalImageUrl + item.enterpriseLogo" alt="">
                  <div class="workroomInfo">
                    <p class="workroomTitle ellipse ">{{item.companyName}}</p>
                    <span class="ellipse-two noWarp">{{item.introduce}}</span>
                    <p></p>
                    <span>{{item.createTime}}</span>
                    <p></p>
                    <span >{{item.scale}}</span>
                    <!-- <div class="vertical"></div> -->
                    <!-- <span>
                      <img src="../../assets/img/home/visitor_num.png" alt="">
                      <i>0</i>
                    </span> -->
                  </div>
                </li>
              </ul>
            </div>
          </div>
        </div>
        <div class="homeContentFlexRight">
          <h2 class="homeContentFlexTitle">推荐职位 <span @click="jumpTo('/recruitJob')">更多</span></h2>
          <div class="homeContentFlexRightBox">
            <div class="homeContentFlexRightBoxJobList">
              <ul>
                <li v-for="(item, index) in recommendJob" :key="index" @click="jumpTo('/jobVacancy?highendJobId=' + item.id)">
                  <h2>{{item.positionName}} <b>{{item.years}}</b></h2>
                  <p>{{item.workAddress}} {{item.education}}</p>
                  <div style="width: 100%; background: rgba(238, 238, 238, 1); height: 1px;"></div>
                  <p>{{item.userName}}</p>
                  <span>{{item.createTime}}</span>
                  <img class="pitchon" src="../../assets/img/home/pitchon.png" alt="">
                </li>
              </ul>
            </div>
          </div>
        </div>
      </div>
      <!-- 友情链接 -->
      <div class="homeContentFlex">
        <div class="homeContentFlexLeft" style="width: 100%;">
          <h2 class="homeContentFlexTitle">友情链接 <!-- <span>更多</span> --></h2>
          <div class="homeContentFlexLeftBox">
            <div class="homeContentFlexLeftBoxFriend">
              <ul>
                <li v-for="(item, index) in friendshipLink" :key="index" class="friendLink" @click="onOpenExternalLink(item.url)">{{item.name}}</li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { Swiper, SwiperSlide, directive } from 'vue-awesome-swiper'
import 'swiper/css/swiper.css'

export default {
  name: 'home',
  components: {
    Swiper,
    SwiperSlide
  },
  directives: {
    swiper: directive
  },
  data () {
    return {
      swiperOptionsBanner: {
        pagination: {
          el: '.swiper-pagination'
        },
        slidesPerView: 1.3,
        // spaceBetween: 20,
        centeredSlides: true,
        loop: true,
        autoplay: true,
        preventLinksPropagation: false
      },
      swiperOptionsSchool: {
        pagination: {
          el: '.swiper-pagination'
        },
        centeredSlides: true,
        loop: false,
        autoplay: false,
        preventLinksPropagation: false
      },
      friendshipLink: [],
      joinEterprise: [],
      recommendJob: [],
      mentoringData: [],
      policyElucidation: [],
      journalismData: [],
      creativeMarket: [],
      productionTasks: [],
      firstRecommendDesigners: [],
      recommendDesigners: [],
      practicalCases: [],
      joinCollegesData: {},
      staticImage: {},
      homeBannerData: []
    }
  },
  computed: {
    swiper () {
      return this.$refs.mySwiper.$swiper
    },
    collegesFlag () {
      return window.location.host === 'www.artcreative.cn'
    }
  },
  created () {
    this.$nextTick(() => {
      console.log('Current Swiper instance object', this.swiper)
    })
    this.fetchSelectBanner()
    this.fetchSelectHomePicture()
    this.fetchSelectSchool()
    this.fetchSelectLiterature()
    this.fetchSelectDesigner()
    this.fetchSelectNeeds()
    this.fetchSelectProduct()
    this.fetchSelectNews()
    this.fetchSelectPolicy()
    this.fetchSelectStudio()
    this.fetchSelectPosition()
    this.fetchSelectEnterprise()
    this.fetchSelectLink()
  },
  methods: {
    // 获取轮播图
    fetchSelectBanner () {
      this.$api.getSelectBanner({
      }).then(res => {
        this.homeBannerData = res.data
      })
    },
    // 获取静态图片
    fetchSelectHomePicture () {
      this.$api.getSelectHomePicture({
      }).then(res => {
        this.staticImage = res.data
        console.log(res)
      })
    },
    // 获取合作高校
    fetchSelectSchool () {
      this.$api.getSelectSchool({
      }).then(res => {
        console.log(res)
        this.joinCollegesData = res.data
        // this.joinCollegesData = [
        //   res.data[0].image1,
        //   res.data[0].image2,
        //   res.data[0].image3
        // ]
      })
    },
    // 获取实战案例
    fetchSelectLiterature () {
      this.$api.getSelectLiterature({
      }).then(res => {
        console.log(res)
        this.practicalCases = res.data
      })
    },
    // 获取推荐设计师
    fetchSelectDesigner () {
      this.$api.getSelectDesigner({
      }).then(res => {
        console.log(res)
        this.firstRecommendDesigners = res.data.slice(0, 1)[0]
        this.recommendDesigners = res.data.slice(1)
      })
    },
    // 获取设计/制作任务
    fetchSelectNeeds () {
      this.$api.getSelectNeeds({
      }).then(res => {
        this.productionTasks = res.data
      })
    },
    // 获取创意集市
    fetchSelectProduct () {
      this.$api.getSelectProduct({
      }).then(res => {
        this.creativeMarket = res.data
      })
    },
    // 获取新闻公告
    fetchSelectNews () {
      this.$api.getSelectNews({
      }).then(res => {
        this.journalismData = res.data
      })
    },
    // 获取政策解读
    fetchSelectPolicy () {
      this.$api.getSelectPolicy({
      }).then(res => {
        this.policyElucidation = res.data
        console.log(res.data)
      })
    },
    // 获取师徒制工作室
    fetchSelectStudio () {
      this.$api.getSelectStudio({
      }).then(res => {
        this.mentoringData = res.data
        console.log(res.data)
      })
    },
    // 获取推荐职位
    fetchSelectPosition () {
      this.$api.getSelectPosition({
      }).then(res => {
        this.recommendJob = res.data
        console.log(res.data)
      })
    },
    // 获取合作企业
    fetchSelectEnterprise () {
      this.$api.getSelectEnterprise({
      }).then(res => {
        var data = res.data
        var joinEterprise = []
        if (res.data.length >= 3) {
          for (let i = 0; i < 3; i++) {
            const e = data[i];
            joinEterprise.push(e)
          }
          this.joinEterprise = joinEterprise
        } else {
          this.joinEterprise = data
        }
        console.log(res.data)
      })
    },
    // 获取友情链接
    fetchSelectLink () {
      this.$api.getSelectLink({
      }).then(res => {
        this.friendshipLink = res.data
      })
    }
  }
}
</script>

<style lang="less" scoped>
@import '../../assets/less/variable.less';

.swiper-slide {
  -webkit-transition: transform .5s;
  -moz-transition: transform .5s;
  -ms-transition: transform .5s;
  -o-transition: transform .5s;
  -webkit-transform: scale(0.9);
  transform: scale(0.9);
  img{
    display: inline-block;
    height: 4rem;
    width: 100%;
  }
}
.swiper-slide-active,.swiper-slide-duplicate-active {
  -webkit-transform: scale(1);
  transform: scale(1);
}
#home {
  .homeSwiper {
    width: 1200px;
    background-color: #FFFFFF;
    padding: .4rem;
    margin: .4rem auto;
  }
  .homeContent {
    width: 1200px;
    margin: auto;
    background-color: #fff;
    padding: .3rem;
    padding-bottom: 1px;
    .homeContentTitleImg {
      p{
        position: relative;
        margin-bottom: .3rem;
        .allText{
          color: #fff;
          font-size: 32px;
          font-weight: bold;
        }
        .homeContentTitleImgText1{
          position: absolute;
          top: 35px;
          left: 170px;

        }
        .homeContentTitleImgText2{
          position: absolute;
          top: 35px;
          right: 110px;
        }
        .homeContentTitleImgText3{
          position: absolute;
          top: 25px;
          left: 400px;

        }
        img{
          display: inline-block;
          width: 100%;
          height: 1rem;
        }
      }
    }
    .homeContentFlex {
      display: flex;
      justify-content: space-between;
      flex-wrap: nowrap;
      margin-bottom: .3rem;
      h2.homeContentFlexTitle {
        font-size: .20rem;
        font-family: 'Helvetica Neue', Helvetica, sans-serif;
        line-height: .5rem;
        font-weight: bold;
        border-bottom: 1px solid #ccc;
        color: @global-primary-color;
        position: relative;
        margin-bottom: .2rem;
        span {
          position: absolute;
          font-size: .16rem;
          font-family: 'Helvetica Neue', Helvetica, sans-serif;
          line-height: .4rem;
          font-weight: bold;
          float: right;
          bottom: 0;
          right: 0;
        }
      }
      .homeContentFlexLeft {
        width: 67%;
        .homeContentFlexLeftBox{
          .homeContentFlexSwiper{
            img{
              height: 4rem;
            }
          }
          .homeContentFlexLeftBoxFriend{
            .friendLink {
              display: inline;
              padding-right: .2rem;
            }
          }
          .homeContentFlexLeftBoxChief{
            font-size: 0;
            .chiefUserImg{
              display: inline-block;
              width: 3rem;
              vertical-align: middle;
              height: 3.5rem;
              img{
                display: inline-block;
                width: 3rem;
                height: 3rem;
              }
              h4{
                font-size: .2rem;
                font-family: 'Helvetica Neue', Helvetica, sans-serif;
                line-height: .5rem;
                font-weight: 500;
                display: inline-block;
                width: 3rem;
                text-align: center;
              }
            }
            .chiefUserImgList{
              display: inline-block;
              width: calc(100% - 3rem);
              vertical-align: middle;
              height: 3.5rem;
              padding-left: .2rem;
              ul {
                display: flex;
                justify-content: left;
                flex-wrap: wrap;
                li:nth-child(5n) {
                  margin-right: 0;
                }
                li{
                  width: 1.5rem;
                  margin-right: .175rem;
                  img{
                    display: inline-block;
                    width: 1.5rem;
                    height: 1.5rem;
                  }
                  h4{
                    font-size: .12rem;
                    font-family: 'Helvetica Neue', Helvetica, sans-serif;
                    line-height: .25rem;
                    font-weight: 500;
                    display: inline-block;
                    width: 1.5rem;
                    text-align: center;
                  }
                }
              }
            }
          }
          .homeContentFlexLeftBoxBazaar{
            ul{
              display: flex;
              justify-content: left;
              flex-wrap: wrap;
              li:nth-child(3n) {
                margin-right: 0;
              }
              li{
                width: 31%;
                margin-bottom: .2rem;
                margin-right: .26rem;
                img{
                  display: inline-block;
                  width: 100%;
                  height: 1.6rem;
                }
                p{
                  font-size: .16rem;
                  font-family: 'Helvetica Neue', Helvetica, sans-serif;
                  line-height: .20rem;
                  font-weight: 500;
                  span{
                    font-size: .14rem;
                    color: #e94b42;
                    vertical-align: initial;
                  }
                }
                span{
                  font-size: .12rem;
                  font-family: 'Helvetica Neue', Helvetica, sans-serif;
                  line-height: .24rem;
                  font-weight: 500;
                  display: inline-block;
                  vertical-align: top;
                  padding-top: .05rem;
                }
                .bazaarTitle{
                  padding-top: .05rem;
                  font-size: .16rem;
                  line-height: .24rem;
                }
              }
            }
          }
          .homeContentFlexLeftBoxWorkroom{
            ul{
              li{
                font-size: 0;
                padding-bottom: .2rem;
                img{
                  display: inline-block;
                  width: 2rem;
                  height: 1.3rem;
                  vertical-align: middle;
                }
                .workroomInfo{
                  display: inline-block;
                  vertical-align: middle;
                  width: calc(100% - 2rem);
                  height: 1.3rem;
                  padding-left: .2rem;
                  p{
                    font-size: .18rem;
                    font-family: 'Helvetica Neue', Helvetica, sans-serif;
                    line-height: .28rem;
                    font-weight: 500;
                  }
                  span{
                    font-size: .14rem;
                    font-family: 'Helvetica Neue', Helvetica, sans-serif;
                    line-height: .28rem;
                    font-weight: 500;
                    color: @global-default-placeholder;
                    vertical-align: middle;
                    img{
                      width: .13rem;
                      height: .1rem;
                    }
                    i{
                      font-style: normal;
                      font-size: 12px;
                      padding-left: .1rem;
                    }
                  }
                  .vertical{
                    display: inline-block;
                    width: 2px;
                    height: 16px;
                    background: #58d1ed;
                    vertical-align: middle;
                    margin: 0.1rem;
                  }
                  .workroomTitle{
                    font-size: .18rem;
                    line-height: .26rem;
                  }
                  .noWarp{
                    // width: 80%;
                    white-space:nowrap;
                    overflow:hidden;
                    text-overflow:ellipsis;
                  }
                }
              }
            }
          }
          .homeContentFlexLeftBoxWorks{
            ul {
              display: flex;
              justify-content: space-between;
              flex-wrap: nowrap;
              li{
                width: 2rem;
                img{
                  display: inline-block;
                  width: 2rem;
                  height: 2rem;
                }
                h4{
                  font-size: .16rem;
                  font-family: 'Helvetica Neue', Helvetica, sans-serif;
                  line-height: .36rem;
                  font-weight: 500;
                  display: inline-block;
                  width: 2rem;
                  text-align: center;
                }
              }
            }
          }
        }
      }
      .homeContentFlexRight {
        width: 30%;
        .homeContentFlexRightBox{
          .homeContentFlexRightBoxList{
            ul{
              font-size: 0;
              li{
                line-height: .44rem;
                span{
                  font-size: .16rem;
                  font-family: 'Helvetica Neue', Helvetica, sans-serif;
                  font-weight: bold;
                  display: inline-block;
                  vertical-align: middle;
                  width: .32rem;
                  height: .32rem;
                  background-color: @global-primary-color;
                  border-radius: 500px;
                  text-align: center;
                  line-height: .32rem;
                  color: #fff;
                }
                span.gray{
                  background-color: @global-default-placeholder;
                }
                p{
                  width: 228px;
                  max-width: 228px;
                  font-size: .16rem;
                  font-family: 'Helvetica Neue', Helvetica, sans-serif;
                  font-weight: 500;
                  display: inline-block;
                  vertical-align: middle;
                  padding-left: .1rem;
                  overflow: hidden;
                  text-overflow: ellipsis;
                  white-space: nowrap;
                }
                i {
                  font-size: .16rem;
                  font-family: 'Helvetica Neue', Helvetica, sans-serif;
                  font-weight: 500;
                  font-style: normal;
                  float: right;
                }
              }
            }
          }
          .homeContentFlexRightBoxJobList{
            ul{
              li{
                padding: .15rem .2rem;
                position: relative;
                box-shadow: 0 0 5px #eee;
                margin-bottom: .15rem;
                h2{
                  font-size: 0.18rem;
                  line-height: 0.26rem;
                  font-weight: bold;
                  color: #333333;
                  b{
                    font-size: 0.18rem;
                    line-height: 0.26rem;
                    font-weight: bold;
                    color: #ff4145;
                    float: right;
                  }
                }
                P{
                  font-size: 0.14rem;
                  color: #666666;
                  padding: .05rem 0;
                }
                span{
                  font-size: 0.12rem;
                  color: #999;
                }
                img.pitchon{
                  position: absolute;
                  left: 0;
                  top: 0;
                  background-color: rgba(0,0,0,0);
                }
              }
            }
          }
          .homeContentFlexRightBoxPolicy{
            ul{
              li{
                font-size: 0;
                padding-bottom: .1rem;
                img{
                  display: inline-block;
                  width: 1.2rem;
                  height: .8rem;
                  vertical-align: middle;
                }
                .workroomInfo{
                  display: inline-block;
                  vertical-align: middle;
                  width: calc(100% - 1.2rem);
                  height: .8rem;
                  padding-left: .1rem;
                  p{
                    font-size: .18rem;
                    font-family: 'Helvetica Neue', Helvetica, sans-serif;
                    line-height: .28rem;
                    font-weight: 500;
                  }
                  span{
                    font-size: .12rem;
                    font-family: 'Helvetica Neue', Helvetica, sans-serif;
                    line-height: .24rem;
                    font-weight: 500;
                    color: @global-default-placeholder;
                    vertical-align: middle;
                    img{
                      width: .13rem;
                      height: .1rem;
                    }
                    i{
                      font-style: normal;
                      font-size: 12px;
                      padding-left: .1rem;
                    }
                  }
                  .vertical{
                    display: inline-block;
                    width: 2px;
                    height: 16px;
                    background: #58d1ed;
                    vertical-align: middle;
                    margin: 0.1rem;
                  }
                  .workroomTitle{
                    font-size: .16rem;
                    line-height: .24rem;
                  }
                }
              }
            }
          }
        }
      }
    }
  }
}
</style>
